<template>
  <div class="course-container">
    <div class="position">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>数据查询</el-breadcrumb-item>
        <el-breadcrumb-item>课程查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header">
      <el-input
        placeholder="请输入课程名称"
        v-model="input"
        clearable
      ></el-input>
      <el-button type="primary" @click="searchbyname">查询</el-button>
    </div>
    <div class="acc-table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="215"></el-table-column>
        <el-table-column
          prop="courseid"
          label="课程ID"
          width="215"
        ></el-table-column>
        <el-table-column
          prop="coursename"
          label="课程名称"
          width="215"
        ></el-table-column>
        <el-table-column
          prop="openteacher"
          label="开课教师"
          width="215"
        ></el-table-column>
        <el-table-column
          prop="people"
          label="选课人数"
          width="215"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="
                isselectsubmit[scope.row['courseid']] &&
                !isselect[scope.row['courseid']]
              "
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >退选</el-button
            >
            <el-button
              v-if="
                !isselectsubmit[scope.row['courseid']] &&
                !isselect[scope.row['courseid']]
              "
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >选课</el-button
            >
            <span v-if="isselect[scope.row['courseid']]">已选</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        ref="pagination"
        :pagesize="pagesize"
        :total="total"
        v-if="total"
        @changepage="changetable"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import http from "@/api/studentapi";
export default {
  name: "",
  data() {
    return {
      input: "",
    };
  },
  methods: {
    searchbyname() {
      let username=localStorage.getItem("username")
      if (this.input) {
        this.$store.dispatch("getstucoursebyname", {username:username,coursename:this.input});
      } else {
        this.$store.dispatch( "getstucourse",username);
      }
    },
    changetable(page) {
      this.$store.dispatch("changestucoursepage", page);
    },
    async handleDelete(index, row) {
      let username = localStorage.getItem("username");
      let result = await http.courseregret({
        username: username,
        courseid: row.courseid,
        coursename: row.coursename,
        openteacher: row.openteacher,
      });
      if (result.status == 200) {
        this.$Toast({
          content: result.data.msg,
          type: result.data.type,
        });
        //告知父组件重新渲染
        this.$emit("changekey");
      }
    },
    async handleEdit(index, row) {
      let username = localStorage.getItem("username");
      let currenttime = new Date();
      let year = currenttime.getFullYear();
      let month = currenttime.getMonth() + 1;
      let day = currenttime.getDate();
      let hour = currenttime.getHours();
      let minutes = currenttime.getMinutes();
      minutes = minutes < 10 ? "0" + minutes : minutes; //若分钟小于10，则前面补0
      let seconds = currenttime.getSeconds();
      seconds = seconds < 10 ? "0" + seconds : seconds; //若秒钟小于10，则前面补0
      let time = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`;
      let result = await http.courseselect({
        username: username,
        courseid: row.courseid,
        coursename: row.coursename,
        teacher: row.openteacher,
        time: time,
      });
      if (result.status == 200) {
        this.$Toast({
          content: result.data.msg,
          type: result.data.type,
        });
        //告知父组件重新渲染
        this.$emit("changekey");
      }
    },
  },
  mounted() {
    let username = localStorage.getItem("username");
    this.$store.dispatch("getstucourse", username);
  },
  computed: {
    ...mapState({
      tableData: (state) => {
        if (Array.isArray(state.student.stucourse.tabledata)) {
          if (
            state.student.stucourse.pagesize &&
            state.student.stucourse.currentpage
          ) {
            let currentpage = state.student.stucourse.currentpage;
            let pagesize = state.student.stucourse.pagesize;
            let tableData = state.student.stucourse.tabledata.slice(
              //实现分页
              (currentpage - 1) * pagesize,
              currentpage * pagesize
            );
            return tableData;
          } else {
            return state.student.stucourse.tabledata;
          }
        }
      },
      pagesize: (state) => {
        if (state.student.stucourse.pagesize) {
          return state.student.stucourse.pagesize;
        } else {
          //若无教师审批，则每页显示条数为0
          return 0;
        }
      },
      total: (state) => {
        if (state.student.stucourse.total) {
          return state.student.stucourse.total;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
      currentpage: (state) => {
        if (state.student.stucourse.currentpage) {
          return state.student.stucourse.currentpage;
        } else {
          //若无教师审批，则总数返回为0
          return 0;
        }
      },
      isselect: (state) => {
        if (state.student.stucourse.isselect) {
          return state.student.stucourse.isselect;
        } else {
          return {};
        }
      },
      isselectsubmit: (state) => {
        if (state.student.stucourse.isselectsubmit) {
          return state.student.stucourse.isselectsubmit;
        } else {
          return {};
        }
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 50px;
  line-height: 50px;
  display: flex;
  margin-bottom: 10px;
  button {
    margin: 0 20px;
  }
}
.position {
  height: 30px;
  line-height: 30px;
  .el-breadcrumb {
    display: inline-block;
  }
  & > span {
    font-size: 16px;
  }
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
